<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>根据起点终点规划路径</title>
		<link rel="stylesheet" href="lib/bootstrap.min.css">
		<link href=" css/style.css" rel="stylesheet">
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="fengMap"></div>

		<div class="btn btn-default navigation" style="position: absolute;left: 10px;top: 50px;height: 34px;z-index: 10000;" id="cancel">取消导航</div>
		<!--操作按钮-->
		<button class="btn btn-default navigation" id="navigation" style="position: absolute;left: 10px;top: 10px;height: 34px;z-index: 10000;">开始导航</button>
		<!--信息提示-->
		<div id="message" class="alert alert-warning hidden">
			<a href="#" class="close" data-dismiss="alert">&times;</a>
			<strong>警告！</strong>起点和终点不能在同一个模型上。
		</div>
		<script src="lib/jquery-2.1.4.min.js"></script>
		<script src="lib/fengmap.min.js"></script>
		<script src="lib/bootstrap.min.js"></script>
		<script>
			//获取版本号,设置title
			document.title = '根据起点终点规划路径V' + fengmap.VERSION;

			//定义全局map变量
			var map;
			var fmapID = 'location-test';
			// 导航对象
			var navi = null;
			//获取真实路径坐标点
			var group1coords = []; //一楼坐标点信息
			// 获取json文件真实坐标点数据
			var coordsData = [];
			var group1CoordsData = []; //F1坐标点对象集合
			//坐标点下标
			var coordIndex = 0;
			//起点终点坐标
			var points = [{
					x: 13028218.4785,
					y: 4737039.7298,
					groupID: 1
				},
				{
					x: 13028218.4785,
					y: 4737009.7298,
					groupID: 1
				}
			];
			var locationMarker;
			var others = true;

			window.onload = function() {
				//获取当前窗口的路径
				var locationCount = 0;
				var path_openid = getQueryString('openId');
				console.log('path_openid', path_openid)
				var naviState = true;
				var mapCoord = {
					x: 13028218.4785,
					y: 4737030.7298,
					groupID: 1
				}; // websocket传过来的坐标信息，经过转换的可直接在地图上显示。
				map = new fengmap.FMMap({
					//渲染dom
					container: document.getElementById('fengMap'),
					//地图数据位置
					mapServerURL: './data/' + fmapID,
					//主题数据位置
					mapThemeURL: 'data/theme',
					//初始二维还是三维状态，三维状态为MODE_3D
					defaultViewMode: fengmap.FMViewMode.MODE_2D,
					//设置主题
					defaultThemeName: '2001',
					// 默认比例尺级别设置为20级
					defaultMapScaleLevel: 22,
					//开发者申请应用下web服务的key
					key: '670072019dff394f3f991e88e98024d5',
					//开发者申请应用名称
					appName: 'innerMap',
				});

				//打开Fengmap服务器的地图数据和主题
				map.openMapById(fmapID);

				//地图加载完成回调
				map.on('loadComplete', function() {
					//初始化导航对象
					navi = new fengmap.FMNavigation({
						map: map,
						// 设置导航线的样式
						lineStyle: {
							//设置线为导航线样式
							lineType: fengmap.FMLineType.FMARROW,
							lineWidth: 6,
							//设置线的颜色
							// godColor: '#FF0000',
							//设置边线的颜色
							// godEdgeColor: '#920000',
						}
					});
					//添加定位图标
					addlocationMarker(points[0]);

					// 设置导航事件
					navi.on('walking', function(data) {
						//设置定位图标的旋转角度
						setLocationMakerPosition(data.point, data.angle);
					});

					//打开websocket
					WebSocketTest(path_openid);
					//监听坐标信息
					var newCoord = {};

					ws.onmessage = function(evt) {
						var received_msg = evt.data;

						console.log('收到消息：', received_msg);
						if(received_msg != '连接成功') {
							try {
								var jsonObj = JSON.parse(received_msg);
								console.log('jsonObj', jsonObj)
								if(jsonObj.movementState == 1) {
									newCoord = {
										'x': jsonObj.pointX,
										'y': jsonObj.pointY
									}
								} else if(jsonObj.movementState == 0) {
									//									newCoord = {
									//										'x': jsonObj.pointX,
									//										'y': jsonObj.pointY
									//									}
									if(locationCount < 1) {
										newCoord = {
											'x': jsonObj.pointX,
											'y': jsonObj.pointY
										}
										console.log('newCoord', newCoord)
									}
									locationCount++;
								}
								console.log('newCoord', newCoord)

								var direction = jsonObj.alpha;
								if(direction >= 360) {
									direction -= 360
								}
								//转换后的地图坐标
								console.log('newCoord', newCoord)
								console.log('direction', direction)

								mapCoord = CoordTransform(newCoord);
								mapCoord.groupID = 1
								console.log('mapCoord', mapCoord)
								if(navi && naviState) {
									//添加定位图标
									setLocationMakerPosition(mapCoord, direction);
									navi.locate(mapCoord)
								}
							} catch(err) {
								console.log('err', err)
							}
						}
					};
				});
				//设置图片标注点位置信息
				function setLocationMakerPosition(coord, angle) {
					var data = {
						//设置定位点的x坐标
						x: coord.x,
						//设置定位点的y坐标
						y: coord.y,
						//设置定位点所在楼层
						groupID: coord.groupID,
						time: .50,
						callback: function() {
							//回调函数
						},
						zOffset: 1
					};
					//设置定位图标旋转角度
					if(angle) {
						locationMarker.rotateTo(-angle);
						if(others) {
							map.rotateTo({
								to: angle,
								time: 1
							});
						}
					}
					//不同楼层
					if(lastGid !== coord.groupID) {
						lastGid = coord.groupID;
						locationMarker.setPosition(data);
					}
					locationMarker.moveTo(data);
					map.moveTo({
						x: coord.x,
						y: coord.y,
						groupID: coord.groupID,
						time: 1
					});
				}

				map.on('mapClickNode', function(event) {
					console.log('event', event)
					if(event.nodeType == fengmap.FMNodeType.MODEL && navi != undefined) {
						var modelLabel = event.label;
						var coord;

						// 如果拾取的模型没有Label对象，则使用模型中心点的坐标
						// 有则使用与模型对应的Label对象的坐标。
						if(!modelLabel) {
							coord = {
								x: event.mapCoord.x,
								y: event.mapCoord.y,
								groupID: event.groupID
							}
						} else {
							coord = {
								x: modelLabel.mapCoord.x,
								y: modelLabel.mapCoord.y,
								groupID: event.groupID
							};
						}
						navi.clearAll();

						navi.setStartPoint({
							x: mapCoord.x,
							y: mapCoord.y,
							height: 2,
							groupID: 1,
							url: 'image/start.png',
							size: 32
						});
						navi.setEndPoint({
							x: coord.x,
							y: coord.y,
							height: 2,
							groupID: coord.groupID,
							url: 'image/end.png',
							size: 32
						});

						navi.drawNaviLine();
					}

					//如：定位坐标返回的坐标点
					coordsData = [{
							x: 13028218.4785,
							y: 4737030.7298,
							groupID: 1
						},
						{
							x: 13028228.4785,
							y: 4737029.7298,
							groupID: 1
						},
						{
							x: 13028218.4785,
							y: 4737028.7298,
							groupID: 1
						},
						{
							x: 13028218.4785,
							y: 4737011.7298,
							groupID: 1
						},
						{
							x: 13028228.4785,
							y: 4737029.7298,
							groupID: 1
						},
						{
							x: 13028218.4785,
							y: 4737009.7298,
							groupID: 1
						}
					];

				})

				//开始导航
				$('#navigation').on('click', function() {
					coordIndex = 0;
//					naviState = true;
					//导航开始
					changeCoord();
				});
				$('#cancel').on('click', function() {
					console.log('取消导航')
					naviState = false;
					navi.clearAll();
				})
				//定位真实导航坐标
				function changeCoord() {
					console.log('changeCoord')
					setTimeout(function() {
						if(coordIndex >= coordsData.length) {
							console.log('sss')
							return;
						}
						if(!navi) return;
						var coordItem = coordsData[coordIndex];
						console.log('coordItem', coordItem)

						navi.locate(coordItem);
						coordIndex++;
						changeCoord();
					}, 500);
				}
				//添加定位点图层
				function addlocationMarker(coord) {
					locationMarker = new fengmap.FMLocationMarker({
						//设置图片的路径
						url: 'image/pointer.png',
						//设置图片显示尺寸
						size: 46,
						//设置图片高度
						height: 1,
					});
					//添加定位点标注
					map.addLocationMarker(locationMarker);
					//设置定位图标位置
					setLocationMakerPosition(coord, 180);
					return locationMarker;
				};
				//楼层ID
				var lastGid = null;

				function CoordTransform(Coord) {
					//创建转换器
					var trasformer = new fengmap.MapCoordTransform();
					//来至定位系统的参数 定位的原点坐标 已经定位的范围,(矩形对角线的2个点)
					var locOrigion = {
						'x': 0,
						'y': 0
					}; //定位坐标原点
					var locRange = {
						'x': 32.387,
						'y': 32.202
					}; //定位范围

					//根据定位四个角点的地图坐标点
					var mapParas = [];
					mapParas[0] = {
						'x': 13028246.2666,
						'y': 4737041.5179
					}; //定位原点地图坐标
					mapParas[1] = {
						'x': 13028214.5795,
						'y': 4737041.5179
					}; //X轴终点地图坐标
					mapParas[2] = {
						'x': 13028214.5702,
						'y': 4737009.6396
					}; //定位原点对角点地图坐标
					mapParas[3] = {
						'x': 13028246.2666,
						'y': 4737009.6302
					}; //Y轴终点地

					//转换器初始化
					trasformer.init(locOrigion, locRange, mapParas);

					//定位系统中的定位坐标
					var loc = {
						'x': Coord.x,
						'y': Coord.y
					}; //定位系统所返回的坐标点

					//转换后的地图坐标
					var mapCoord = trasformer.transform(loc);
					return mapCoord;
				}
			};
		</script>
	</body>

</html>